<template>
	<view class="order">
		<view class="" style="height: 100rpx;background-color: #fff;width: 100%;position: fixed;top: 0%;"></view>
		<view class="headersBox">
			<view class="headers">
				<view class="utextt1">
					隐藏
				</view>
				<view class="ordertypeBox">
					<view class="ordertype" :class="{'colorlan':sendOrReceive}" @click="sendOrReceiveMD(true)">
						发货中
					</view>
					<view class="ordertype" :class="{'colorlan':!sendOrReceive}" @click="sendOrReceiveMD(false)">
						收货单
					</view>
				</view>
				<view class="utextt2">
					<!-- 开票 -->
				</view>
			</view>
			<view class="tabsBox">
				<view class="tabs" v-for="(item,index) in tabs" :key="item.id"
					:class="{'xuanzhong':status==index?true:false}" @click="statusMD(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="contentBox" v-if="list.length>0">
			<view class="content" v-for="item in list" :key="item.year">
				<view class="time">
					{{item.year}}
				</view>
				<view class="orderBox"  v-for="(item2,index) in item.orders"
					:key="index"  @click="navigateToMD(item2,item2.waybillId)"> 
					<view class="titles">
						<view class="title">
							{{item2.vehicleType==''?'未接单':item2.vehicleType}}
						</view>
						<view class="money">
							{{item2.totalAmount}}元
						</view>
					</view>
					<view class="times">
						{{item2.createTime |timeMonthDay}}
					</view>
					<view class="times_box">
						<view class="">
							<view class="items_box_flx">
								<view class="items_box_flx_title"></view>
								<view class="itmes_ziti">
									{{item2.address[0]}}
								</view>
							</view>
							<view class="items_box_flx">
								<view class="items_box_flx_title" style="background-color: #5998A6">
								</view>
								<view class="itmes_ziti">
									{{item2.address[1]}}
								</view>
							</view>
						</view>
						<!-- <view class="bt" @click.stop.prevent="Comeagain(item2)">
							<view class="zailai">
								再来一单
							</view>
						</view> -->
						<view class="bt" @click.stop.prevent="evaluate(item2)" v-if="item2.isEvaluate===0">
							<view class="zailai">
								评价
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="null_box" v-else>
			<image src="@/static/png/null.png" mode="aspectFill"></image>
			<view class="">暂无内容</view>
		</view>
		
		
	<!-- 	<view class="jiazai">
			{{this.current2 < this.pages?'加载更多':'没有更多了'}}
		</view> -->
	</view>
</template>

<script>
	import orderjs from '@/api/modules/order.js'
	export default {
		data() {
			return {
				tabs: [{
						name: '进行中',
						id: 0
					},
					{
						name: '已完成',
						id: 1
					},
					{
						name: '已取消',
						id: 2
					}
				],
				status: 0, //状态
				sendOrReceive: true, //收发类型 true收
				current: 1, //页码
				size: 10, //大小
				pages: 1, //总页码
				current2: 1, //当前页码
				list: [], //数据体
				type: 0
			}
		},
		methods: {
			evaluate(e){
				uni.navigateTo({
					url: '/subPackages/order/evaluate/evaluate?id='+e.orderId
				})
			},
			//再来一单
			Comeagain(e){
				
			},
			navigateToMD(item,index) {
				if(item.wstate==1 & item.transportStatus!=9){
					uni.navigateTo({
						url: '/subPackages/order/proceedOder/proceedOder?id=' + index
					})
				}else if(item.transportStatus == 7 & item.paystate==0){
					uni.navigateTo({
						url: '/subPackages/order/proceedOder/proceedOder?id=' + index
					})
				}else if(item.wstate==0 & item.transportStatus==2 & item.paystate==0){
					uni.navigateTo({
						url: '/subPackages/order/awaitOrder/awaitOrder?id=' + index
					})
				}else{
					uni.navigateTo({
						url: '/subPackages/order/orderDetails/orderDetails?id=' + index
					})
				}
				
			},
			//获取列表
			order_list() {
				var d = {
					current: this.current,
					size: 100,
					status: this.status+1,
					sendOrReceive: this.sendOrReceive
				}
				orderjs.order_list(d).then((res) => {
					if (res.data.code === 200) {
						this.list = res.data.data.records;
					}
				})
				// console.log(res);

			},
			// 订单状态
			statusMD(index) {
				this.status = index
				this.pages = 1
				this.current2 = 1
				this.current = 1
				this.list = []
				this.order_list()
			},
			//订单类型
			sendOrReceiveMD(tag) {
				this.sendOrReceive = tag
				this.pages = 1
				this.current2 = 1
				this.current = 1
				this.list = []
				this.order_list()
			}
		},
		onShow() {
			this.order_list()
		},
		onReachBottom() {
			if (this.current2 < this.pages) {
				this.current++
				this.order_list()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.null_box {
		width: 100%;
		text-align: center;
		margin-top: 300rpx;
		font-size: 28rpx;
		color: #303132;
	}
	
	.null_box image {
		width: 330rpx;
		height: 184rpx;
	}
	.itmes_ziti {
		font-size: 26rpx;
		width: 360rpx;
		margin-left: 30rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.items_box_flx {
		display: flex;
		align-items: center;
	}

	.items_box_flx_title {
		width: 16rpx;
		height: 16rpx;
		background-color: #00A0E9;
		border-radius: 100%;
	}

	.times_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 23rpx;

	}

	.order {
		display: flex;
		flex-direction: column;
		width: 100%;
		// height: calc(100vh - var(--window-bottom));
		height: 100vh;
		box-sizing: border-box;
		padding-top: calc(var(--status-bar-height) + 152upx);
		overflow: scroll;
		padding-bottom: 20upx;
	}

	.headersBox {
		background-color: #fff;
		box-sizing: border-box;
		padding: 16upx 30upx 6upx;
		position: fixed;
		width: 100%;
		top: var(--status-bar-height);

		.headers {
			display: flex;
			justify-content: space-between;
			align-items: center;

			font-size: 26upx;

			.ordertypeBox {
				border: 2upx solid #00A0E9;
				display: flex;
				color: #00A0E9;
				border-radius: 8upx;


				.ordertype {
					box-sizing: border-box;
					padding: 8upx 20upx;
				}

				.colorlan {
					background-color: #00A0E9;
					color: #fff;
				}
			}

			.utextt1 {
				width: 80upx;
				color: #fff;
			}

			.utextt2 {
				width: 80upx;
				text-align: right;
			}

		}

		.tabsBox {
			margin-top: 30upx;
			display: flex;
			justify-content: space-around;
			font-size: 28upx;

			.tabs {
				box-sizing: border-box;
				padding-bottom: 4upx;
			}

			.xuanzhong {
				color: #02A7F0;
				border-bottom: 4upx solid #02A7F0;
			}
		}
	}

	.contentBox {
		flex: 1;
		box-sizing: border-box;
		padding: 0upx 30upx;

		.content {
			margin-top: 20upx;

			.time {
				color: #a3a3a3;
				font-size: 26upx;
				margin-bottom: 8upx;
				font-family: PingFang SC-Regular;
			}

			.orderBox {
				margin-top: 20upx;
				background-color: #fff;
				border-radius: 16upx;
				box-sizing: border-box;
				padding: 20upx 30upx;

				.titles {
					display: flex;
					font-weight: 600;
					font-size: 28upx;
					justify-content: space-between;
				}

				.times {
					margin-top: 10upx;
					color: #bababa;
					font-size: 24upx;
					font-family: PingFang SC-Regular;
				}

				.addressBox {
					margin-top: 20upx;

					.address {
						margin-top: 10upx;
						display: flex;
						align-items: center;

						.icons {
							width: 20upx;
							height: 20upx;
							border-radius: 50%;
							background-color: red;
						}

						.xinxi {
							margin-left: 20upx;
							flex: 1;
							font-size: 26upx;
							padding-right: 60upx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
							font-family: PingFang SC-Regular;
							font-weight: 500;
						}
					}
				}

				.bt {
					display: flex;
					justify-content: flex-end;

					.zailai {
						color: #00A0E9;
						font-size: 24upx;
						border: 2upx solid #00A0E9;
						box-sizing: border-box;
						padding: 10upx 20upx;
						border-radius: 8upx;
					}
				}
			}
		}
	}
</style>